<script setup lang="ts">
import { APPROVE_STATUE, APPROVE_STATUE_COLOR, APPROVE_STATUE_BG_COLOR } from '/@/common/constant';
import { computed } from 'vue';
import { isJsonString } from '/@/utils/string-util';
const props = defineProps<{
  item: FlowPathDto.RecordDto;
}>();

const displayAttributeValue = computed(() => {
  return (item: FlowPathTemplateApi.AttributeDto) => {
    if (item.attributeTypeName === 'radio' || item.attributeType === 6) {
      //单选项不为空才解析
      if (
        item.attributeOption &&
        item.attributeOption.length > 0 &&
        isJsonString(item.attributeOption)
      ) {
        const objArr: { name: string; value: string }[] = JSON.parse(item.attributeOption);
        const selectedItem = objArr.find((subItem) => subItem.value === item.attributeValue);
        return selectedItem?.name || '';
      }
    } else if (item.attributeTypeName === 'checkbox' || item.attributeType === 7) {
      //单选项不为空才解析
      if (
        item.attributeOption &&
        item.attributeOption.length > 0 &&
        isJsonString(item.attributeOption) &&
        item.attributeValue
      ) {
        const objArr: { name: string; value: string }[] = JSON.parse(item.attributeOption);
        const values = item.attributeValue.split(',');
        const radioValArr = objArr.filter((item) => values.includes(item.value));
        return radioValArr.map((item) => item.name).join(', ');
      }
    } else if (item.attributeTypeName === 'department' || item.attributeType === 11) {
      //单选项不为空才解析
      if (item.attributeValue && isJsonString(item.attributeValue)) {
        const deptObj: { id: string; name: string } = JSON.parse(item.attributeValue);
        return deptObj.name;
      }
    } else {
      return item.attributeValue;
    }
  };
});
</script>
<template>
  <view class="my-approve-item">
    <view class="my-approve-item__header">
      <view class="my-approve-item__header--left">
        <text>{{ props.item.title || '-' }}</text>
      </view>
      <view
        class="my-approve-item__header--right"
        :style="{
          color: props.item.status ? APPROVE_STATUE_COLOR[props.item.status] : '#aaa',
          backgroundColor: props.item.status ? APPROVE_STATUE_BG_COLOR[props.item.status] : '#eee',
        }"
      >
        <text>{{ props.item.status ? APPROVE_STATUE[props.item.status] : '-' }}</text>
      </view>
    </view>
    <view v-for="attribute in props.item.attributes" :key="attribute.id">
      <text>{{ attribute.attributeName }}:&nbsp;&nbsp;</text>
      <text> {{ displayAttributeValue(attribute) }}</text>
    </view>
  </view>
</template>
<style lang="scss">
.my-approve-item {
  background-color: #fff;
  color: #999;
  padding: 20px 20px;
  border-radius: 10px;
  margin-top: 20px;
  font-size: 28px;
  font-weight: normal;

  &:last-child {
    margin-bottom: 20px;
  }

  &__header {
    display: flex;
    align-items: center;
    margin-bottom: 5px;

    &--left {
      padding-right: 20px;
      flex: 1;
      color: #333;
      font-size: 32px;
      font-weight: bold;
    }
    &--right {
      font-size: 20px;
      padding: 4px 12px;
      border-radius: 8px;
    }
  }
}
</style>
